<template>
	<view class="code-container">
		<text class="code-title">输入验证码</text>
		<view class="tips">已发送验证码至 <text class="phone-number"> 18888888888</text></view>
		<view class="verification-code">
			<VerificationCodeInput />
		</view>
		<view class="confirm-btn">
			<button v-if="!isForgetPwd" type="primary" @tap="confirm">确 定</button>
			<button v-if="isForgetPwd" type="primary" @tap="confirmChangePwd">确 定</button>
		</view>
		<view class="time-tips"> <text class="time">30s</text>重新发送 </view>
	</view>
</template>

<script>
	import VerificationCodeInput from '@/components/VerificationCodeInput.vue'


	export default {
		components:{
			VerificationCodeInput:VerificationCodeInput
		},
		data() {
			return {
				isForgetPwd: false
			};
		},
		onLoad(options) {
			if (options.type === 'forgetPwd') {
				this.isForgetPwd = true
			} else {
				this.isForgetPwd = false
			}
		},
		methods:{
			// 确认登录
			confirm() {
					uni.showToast({
						title: '登录成功',
						icon: 'success',
						duration: 2000,
					})
					uni.switchTab({
						url: '/pages/index/index'
					})
				}

				// 确认修改密码
				, confirmChangePwd() {
					uni.navigateTo({
						url: '/pages/login/resetPwd',
					})
				}

		}
	}
</script>

<style lang="scss" scoped>
	.code-container {
		padding: 80rpx 70rpx;

		.code-title {
			position: absolute;
			letter-spacing: 12rpx;
			font-size: 56rpx;
			font-weight: 600;
		}

		.tips {
			position: absolute;
			margin-top: 120rpx;

			.phone-number {
				color: rgb(176, 176, 176);
			}
		}

		.verification-code {
			margin-top: 240rpx;
			margin-bottom: 100rpx;
		}

		.confirm-btn {
			margin-bottom: 100rpx;

			button {
				border-radius: 40rpx;
				background-color: #465cff;
			}
		}

		.time-tips {
			text-align: center;
			color: rgb(176, 176, 176);

			.time {
				color: rgb(207, 25, 25);
			}
		}
	}
</style>